<template>
  <div class="remind-view">
    <van-nav-bar title="提醒事项" />
    <div class="content">
      <div class="center-content">
        <van-cell-group inset>
          <van-cell title="名字" :value="remindItem.name" />
          <van-cell title="提醒时间" :value="remindItem.remindTime" />
          <van-cell title="提醒类型" :value="remindItem.remindType" />
          <van-cell title="状态" :value="remindItem.state" />
        </van-cell-group>
        <div class="button-wrapper">
          <van-button type="primary" block @click="close">确认</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getRemind, closeRemind } from '@/requests/remindItem'
import { showToast } from 'vant'

const route = useRoute()
const remindItem = ref({})
const id = ref('')
const uuid = ref('')

const close = async () => {
  try {
    const res = await closeRemind(id.value, uuid.value)
    showToast({
      type: 'success',
      duration: 15000000,
      message: '关闭提醒事项成功'
    })
    get()
    //background: var(--van-popup-background)
  } catch (error) {
    console.log(error)
    showToast({
      type: 'fail',
      duration: 15000000,
      message: error.message
    })
  }
}

const get = async () => {
  try {
    const res = await getRemind(id.value)
    if (res.code === 200) {
      remindItem.value = res.data
    } else {
      showToast({
        type: 'fail',
        message: res.message
      })
    }
  } catch (error) {
    showToast({
      type: 'fail',
      message: '获取数据失败'
    })
  }
}

onMounted(() => {
  id.value = route.query.id
  uuid.value = route.query.uuid
  get()
})
</script>

<style scoped lang="scss">
.remind-view {
  height: 100vh;
  background-color: #f1f0f0;
  display: flex;
  flex-direction: column;

  .content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;

    .center-content {
      width: 100%;
      max-width: 400px;

      .van-cell-group {
        margin-bottom: 20px;
      }

      .button-wrapper {
        padding: 0 16px;
      }
    }
  }
}
</style>
